<template>
  <div class="streetDiv" v-show="isStreetPhotosShow">
  <!--关闭图标-->
    <div style="position: absolute;left: 20px;z-index: 9999" @click="isStreetPhotosShow=false">
      <h3 style="position: absolute;left: 20px;z-index: 9999;width: 250px" >{{pointDis}}</h3>
      <el-icon :size="20"><CloseBold /></el-icon>
    </div>
    <el-carousel :interval="5000" type="card" height="300px">
      <el-carousel-item class="el-carousel__item" v-for="item in 6" :key="item">
        <img class="carousel-image"  :src=getImgUrl(item) />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<script lang="ts" setup>
import store from "../store/index.js";
import axios from "axios";
import {
  CloseBold,
} from '@element-plus/icons-vue'
import { ref, reactive, toRefs} from 'vue'

//控制街景显影
const isStreetPhotosShow=ref(false)
/*HotParkPointManage与TopMenu传值*/
//TopMenu通过Home.vue传值
export interface ExposeType{
  getIsShowStreetPhotoMsg:Function;
}
//将TopMenu中的isShowStreetPhoto值传入
const  getIsShowStreetPhotoMsg = (val:boolean,ex:number,ey:number) => {
  isStreetPhotosShow.value = val
 //获取街景
  getStreetPhoto(ex,ey);
}
//将值暴露
defineExpose({
  getIsShowStreetPhotoMsg
})

//照片集合 获取服务器图片
const streetphotos = ref([]);
//最近距离
const pointDis=ref(null)
const getImgUrl=(name)=>{
 // store.state.imgurl
  return new URL(store.state.imgurl + streetphotos.value[name],import.meta.url).href
}
//通过axios获取数据库图片路径
const getStreetPhoto=(pointx,pointy)=>{
  // if(isStreetPhotosShow.value==true)
  // {
  //   isStreetPhotosShow.value=!isStreetPhotosShow.value
  // }else{
  //   isStreetPhotosShow.value=!isStreetPhotosShow.value
  // }
  //获取图片路径
  //清空数据
  streetphotos.value=[]
  let pointCoor={
    x:pointx,
    y:pointy,
  }
  axios.post(store.state.dbApi+'/getphoto',pointCoor).then(result=>{
    let getData=result.data
    if(getData[0]['distance']<=25){
    streetphotos.value.push(getData[0]['img_0']);
    streetphotos.value.push(getData[0]['img_45']);
    streetphotos.value.push(getData[0]['img_90']);
    streetphotos.value.push(getData[0]['img_135']);
    streetphotos.value.push(getData[0]['img_180']);
    streetphotos.value.push(getData[0]['img_225']);
    streetphotos.value.push(getData[0]['img_270']);
    streetphotos.value.push(getData[0]['img_315']);
    pointDis.value="中心偏移量："+getData[0]['distance']+"m"
    console.log(streetphotos.value,pointDis.value)
  }else{
      pointDis.value='该区域无街景！'
    }
  })
}

</script>

<style scoped>

.el-carousel__item {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.el-carousel__item h3 {
  /*color: #ffffff;*/
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}
.carousel-image {
  max-width: 100%;
  max-height: 100%;
}

.el-carousel__item:nth-child(2n) {
  /*background-color: #ffffff;*/
}

.el-carousel__item:nth-child(2n + 1) {
  /*background-color:#ffffff;*/
}

/*DIV BOX*/
.streetDiv{
  background-color: white;
  height: 340px;
  width: 65%;
  padding-top: 20px;
  bottom: 0;
  right: 0;
  position:absolute;
}
</style>